<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Hello</title>

	<script type="text/javascript" src="scripts/jquery-1.4.min.js"></script>
	<script type="text/javascript" src="scripts/json.min.js"></script>

    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"/>
    <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

    <script type="text/javascript">
        $(function () {
            $('#getDummyClientBtn')[0].onclick = function() {
                $.getJSON("app/clients/one", function(client) {
                    $("#changeme").html(client.name);
                });
            };

            $('#getClientsBtn')[0].onclick = function() {
                $.getJSON("app/clients/all", function(clients) {
                    $("#changeme").html(clients[0].name);
                });
            };

            $("a#inline").fancybox({
                'hideOnContentClick': true,
                'width': 400,
                'height': 400,
                'autoDimensions': false,
                'autoScale': false,
                'onCleanup': displaynewname
            });

            function displaynewname() {
                $('div#newname').html($('div#data').html());
            }
        })
    </script>
</head>
<body>
    <h1>Hello from Invoicing Web UI !</h1>
    <p id="changeme">The time will shortly be written here</p>
    <br/>
    <button id="getDummyClientBtn">Get Dummy Client</button>
    <br/>
    <button id="getClientsBtn">Get Clients</button>
    <br/>
    <a id="inline" href="#data">New client</a>

    <div id="newclient" style="display:none">
        <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>

    <br/>
    <div id="newname"></div>
</body>

</html>